import React, { useEffect } from 'react';

import Checkbox from '../../../Checkbox';
import Radio from '../../../Radio';

import type { CheckboxProps } from '../../../Checkbox';
import type { RadioProps } from '../../../Radio';

export function SelectCheckbox(props: CheckboxProps) {
  const { indeterminate, checked, ...rest } = props;
  const ref = React.useRef<HTMLInputElement>(null!);

  useEffect(() => {
    if (typeof indeterminate === 'boolean' && ref.current) {
      ref.current.indeterminate = !checked && indeterminate;
    }
  }, [ref, indeterminate]);

  const checkboxProps: CheckboxProps = {
    indeterminate: ref.current && ref.current.indeterminate,
    checked,
    ...rest,
  };
  return <Checkbox {...checkboxProps} style={{ height: 22 }} />;
}
export function SelectRadio(props: RadioProps) {
  return <Radio {...props} />;
}
